<template>
    <el-form ref="ruleFormRef" style="max-width: 600px" :model="ruleForm" status-icon :rules="rules"
                    label-width="auto" class="demo-ruleForm">
        <el-form-item class="mb-20" prop="username">
            <template v-slot:label>
                <span style="color:red">*</span>用户昵称
            </template>
            <el-input v-model="ruleForm.nickName" autocomplete="off"/>
        </el-form-item>
        <el-form-item class="mb-20" prop="phone">
            <template v-slot:label>
                <span style="color:red">*</span>手机号码
            </template>
            <el-input v-model="ruleForm.phone" autocomplete="off"/>
        </el-form-item>
        <el-form-item class="mb-20" label="邮箱" prop="email">
            <el-input v-model="ruleForm.email" autocomplete="off" />
        </el-form-item>
        <el-form-item>
            <el-button 
            v-loading.fullscreen.lock="fullscreenLoading"
            type="primary" 
            @click="editInfor()">
             保存
            </el-button>
            <el-button type="warning" @click="router.push('/homepage')">关闭</el-button>
        </el-form-item>
    </el-form>
</template>

<script setup>
import axios from "axios";
import {ref} from "vue";

import { ElLoading } from 'element-plus'


import { useRouter } from 'vue-router'

let router = useRouter()


const ruleForm = ref({
    id: JSON.parse(sessionStorage.getItem('loginInfor')).id,
    username: JSON.parse(sessionStorage.getItem('loginInfor')).username,
    password: JSON.parse(sessionStorage.getItem('loginInfor')).password,
    nickName: JSON.parse(sessionStorage.getItem('loginInfor')).nickName,
    email: JSON.parse(sessionStorage.getItem('loginInfor')).email,
    phone: JSON.parse(sessionStorage.getItem('loginInfor')).phone,
    img: JSON.parse(sessionStorage.getItem('loginInfor')).img,
    role: JSON.parse(sessionStorage.getItem('loginInfor')).role,
    cid: JSON.parse(sessionStorage.getItem('loginInfor')).cid,
    token: JSON.parse(sessionStorage.getItem('loginInfor')).token,
})

const fullscreenLoading = ref(false)

function editInfor() {
    //console.log(ruleForm.value);
    
    axios.put('/us/edit', ruleForm.value)
        .then(function (response) {
            //console.log(response);
            if (response.data.code == 1) {
                sessionStorage.setItem('loginInfor', JSON.stringify(ruleForm.value));
                fullscreenLoading.value = true
                location.reload();
                const loading = ElLoading.service({
                    lock: true,
                    text: 'Loading',
                    background: 'rgba(0, 0, 0, 0.7)',
                })
                setTimeout(() => {
                    loading.close();
                }, 1000)
            } else {
                ElMessage({
                message: '修改失败',
                type: 'warning',
                })
            }
        })
  
}



</script>

<style scoped>
.info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-top: 1px solid #eee;
}

</style>